﻿@{
    ViewBag.Title = "新闻列表";
    Layout = "~/Areas/WeiXinAreas/Views/Shared/_LayoutWeui.cshtml";
}
<style>
    .div_img {
        width:40%;
        float:left;
        height:3rem;
    }
        .div_img > img {
            width:100%;
            height:100%;
        }
    .div_content {        
        width:55%;
        float:right;
    }
        .div_content h4 {
            white-space:nowrap;
            overflow:hidden;
            color:#9c9c9c;
        }

        .div_content>p {
            font-size:.5rem;
            color:dimgrey;
            height:2.5rem;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .div_content > span {
            font-size:.6rem;
        }
</style>
<div class="weui-cells" style="margin-top:0rem">
</div>
<div class="weui-loadmore" id="divMore">
    <i class="weui-loading"></i>
    <span class="weui-loadmore__tips">正在加载...</span>
</div>
<div style="height:60px;"></div>
<div class="weui-tabbar" style="position:fixed;">
    <a href="~/WeiXinAreas/Main/Index" class="weui-tabbar__item">
        <div class="weui-tabbar__icon">
            <img src="~/Content/M/img/home@2x.png" alt="">
        </div>
        <p class="weui-tabbar__label">首页</p>
    </a>
    <a href="~/WeiXinAreas/Main/NewsList" class="weui-tabbar__item weui-bar__item--on">
        <div class="weui-tabbar__icon">
            <img src="~/Content/M/img/kecheng@2x_.png" alt="">
        </div>
        <p class="weui-tabbar__label">新闻</p>
    </a>
    <a href="~/WeiXinAreas/Main/Ponser" class="weui-tabbar__item ">
        <div class="weui-tabbar__icon">
            <img src="~/Content/M/img/person@2x.png" alt="">
        </div>
        <p class="weui-tabbar__label">个人</p>
    </a>
</div>

@section footScript
{
    <script type="text/javascript">
        //上拉加载更多
        var loading = false;  //状态标记
        var _page = 0;
        $(document).ready(function () {
            initMoreData();
            $(document.body).infinite().on("infinite", function () {
                if (loading) return;
                loading = true;
                setTimeout(function () {
                    //_page++;
                    initMoreData();
                }, 1000);
            });
        });
        function initMoreData() {
            $.ajax({
                url: "GetNewForWeiXin?offset=" + _page,
                dataType: 'json',
                type: 'post',
                success: function (_data) {
                    loading = false;
                    var _html = '';
                    _page = _data.length;
                    for (var i = 0, len = _data.length; i < len; i++) {
                        var record = _data[i];
                        _html += '<div class="weui-cell"><div class="weui-cell__bd">'
                        _html += '<a href="' + record.ID + '">';
                        _html += '<div class="div_img"><img src="' + record.IMGsrc + '" /></div>';
                        _html += '<div class="div_content"><h4>' + record.title + '</h4><p>' + record.content + '</p></div>';
                        _html += '</a>';
                        _html+='</div></div>';
                    }
                    $(".weui-cells").append(_html);
                    if (_data.length < 10) {
                        $(".weui-cells").after('  <div class="weui-footer" style="margin:1rem">--已经到底了--</div>');
                        $(document.body).destroyInfinite();
                        $("#divMore").hide();
                    }
                    $(".weui-cells img").each(function(index, element) {
                        showWxImg($(this))
                    });
                }
            });
        }
        window.WxImgTemp = '';
        function showWxImg(jQele) { //jQele 为 jquery 对象
        var url = jQele.attr('src'),
            time = new Date().getTime(),
            frameid = 'wxImg_' + time;
        window.WxImgTemp = '<img id="img" style="width:100%" src=\'' + url + '?' + time + '\' />\
                <script>window.onload = function() {\
                parent.document.getElementById(\'' + frameid + '\').height = document.getElementById(\'img\').height+\'px\'; \
                }<//script>';
        var iframe = '<iframe id="' + frameid + '" \
                              src="javascript:parent.WxImgTemp;" \
                              frameBorder="0" scrolling="no" width="100%"></iframe>';
        jQele.after(iframe).remove()
    }
      
    @*var article = '.article'; //定位，其下所以的img都会做处理
    var  = };
    $(article + ' img').each(function(index, element) {
        showWxImg($(this))
    })*@
    window.WxImgTemp = '';
    </script>
}
